<template>
    <n-drawer :show="show" :width="500" :close-on-esc="true" :mask-closable="false">
        <n-drawer-content>
            <template #header>
                流水线定义
            </template>
            <n-data-table
                :key="(row) => row.key"
                :columns="columns"
                :data="variableList"
            />
            <template #footer>
                <n-flex justify="space-between" style="width: 100%">
                    <n-button ghost type="error">
                        关闭
                    </n-button>
                    <n-button ghost type="primary">
                        保存
                    </n-button>
                </n-flex>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script setup lang="ts">

import {NButton} from "naive-ui";
import {onMounted, ref} from "vue";
import {getVariablesByPipelineId} from "@/api/pm/pipeline.ts";

const props = defineProps({
    pipelineId: {
        type: String,
        required: true
    },
    show: {
        type: Boolean,
        required: true
    }
})
const variableList = ref([])
const columns = [
    {
        title: 'KEY',
        key: 'key',
    },
    {
        title: 'VALUE',
        key: 'value',
    }]
onMounted(() => {
    getVariablesByPipelineId(this.pipelineId).then((res) => {
        variableList.value = res.data
    })
})


</script>

<style scoped lang="scss">

</style>
